<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户注册</title>
  <style>
    /* 全局样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
    }

    form {
      background-color: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      width: 100%;
      max-width: 400px;
      background-image: linear-gradient(to bottom right, #f9f9f9, #f4f4f4);
      /* 背景渐变色 */
    }

    h2 {
      text-align: center;
      color: #333;
      margin-bottom: 30px;
    }

    .form-group {
      margin-bottom: 20px;
      position: relative;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      color: #555;
      font-weight: 600;
    }

    .form-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      transition: border-color 0.3s ease;
    }

    .form-group input:focus {
      outline: none;
      border-color: #4CAF50;
      box-shadow: 0 0 5px rgba(76, 175, 80, 0.2);
    }

    .form-group::before {
      content: "";
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      background-size: cover;
    }

    #username.form-group::before {
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16"><path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z"/></svg>');
      /* 用户名图标 */
    }

    #password.form-group::before {
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-lock" viewBox="0 0 16 16"><path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/></svg>');
      /* 密码图标 */
    }

    #securityQuestion.form-group::before {
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-question-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M5.255 5.786a.237.237 0 0 0.241.247h.825c.138 0.248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0.635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0.25.246h.811a.25.25 0 0 0.25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0.533.425.927 1.01.927.609 0 1.244-.463 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286h.01c.268-.735.74-.927 1.009-.927h.013z"/></svg>');
      /* 密保问题图标 */
    }

    #securityAnswer.form-group::before {
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-key" viewBox="0 0 16 16"><path d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1.354.854l-3 3a.5.5 0 0 1-.708 0l-3-3A.5.5 0 0 1 6 10h2.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.288l-3 3A.5.5 0 0 0 0 13.5h1.5a.5.5 0 0 0.5-.5l3-3A3 3 0 0 0 4 5z"/><path d="M10 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"/></svg>');
      /* 密保答案图标 */
    }

    button {
      width: 100%;
      padding: 12px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      font-size: 16px;
    }

    button:hover {
      background-color: #45a049;
    }

    button:active {
      transform: scale(0.98);
    }
  </style>
</head>

<body>
  <form id="registerForm">
    <h2>用户注册</h2>
    <div class="form-group">
      <label>用户名：</label>
      <input type="text" id="username" required>
    </div>
    <div class="form-group">
      <label>密码：</label>
      <input type="password" id="password" required>
    </div>
    <div class="form-group">
      <label>密保问题：</label>
      <input type="text" id="securityQuestion" required>
    </div>
    <div class="form-group">
      <label>密保答案：</label>
      <input type="text" id="securityAnswer" required>
    </div>
    <button type="submit">注册</button>
  </form>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    document.getElementById('registerForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      // 此处可添加与之前类似的表单验证及提交逻辑代码
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      const securityQuestion = document.getElementById('securityQuestion').value;
      const securityAnswer = document.getElementById('securityAnswer').value;

      // 创建 URLSearchParams 对象并添加数据
      const formData = new URLSearchParams();
      formData.append('username', username);
      formData.append('password', password);
      formData.append('securityQuestion', securityQuestion);
      formData.append('securityAnswer', securityAnswer);

      formData.forEach((value, key) => {
        console.log(`${key}: ${value}`);
      });


      axios({
        method: 'post',
        url: 'https://dhrdfawueimg.sealoshzh.site/api/reguser',
        Headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        data: formData
      }).then(result => {
        if (result.data.status === 0)
          alert(`正在跳转到登录页面...`);
        window.location.href = '../qianduan(1)/frontend/index.html'

      }).catch(error => {
        if (error.response.data.status === 1)
          alert(`注册失败，请重试！`);
      })
    });
  </script>
</body>

</html>